<template>
	<div class="material">
		<div class="banner">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(banner, index) in bannerList"
					:key="index"
				>
					<img v-lazy="banner" 
						:key="banner"
					/>
				</swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="nav border-1px">
			<div class="nav-item"
				v-for="(nav, index) in  navList"
				:class="{ active: id == nav.id }"
				@click="getNav(index)"
			>
				{{nav.name}}
			</div>
		</div>
		<div class="content border-1px" v-for="(item, index) in contentList">
			<div class="c-header">
				<img v-lazy="imgUrl" />
				<div class="c-header-right">
					<p class="name">小编推荐</p>
					<p class="time">{{item.createtime}}</p>
				</div>
			</div>
			<div class="c-content">
				<p>{{item.content}}</p>
				<div class="images">
					<img v-for="(image, index) in item.images" v-lazy="image" />
				</div>
			</div>
			<div class="c-footer">
				<div class="c-footer-content">
					<img src="../assets/img/share.png" />
					<span>一键分享</span>
				</div>
			</div>
		</div>
		<BotNav :cateindex=3></BotNav>
	</div>
</template>
<script>
	import axios from 'axios'
	import Http from '../http.js'
	import BotNav from '../components/BotNav.vue'
	export default{
		components: {
			BotNav
		},
		data(){
			return{
				page: 1,
				id: 2,
				bannerList: [],
				navList: [],
				contentList: [],
				swiperOption: {
		          	pagination: {
		            	el: '.swiper-pagination',
		            	dynamicBullets: true
		          	}
		        },
		        imgUrl: window.localStorage.getItem("recommend_image")
			}
		},
		created(){
			axios.post(Http.SHARETYPE).then( res => {
				var ret = res.data;
				this.bannerList = ret['data']['banner'];
				this.navList = ret['data']['type']
			})
			this.getData()
		},
		methods: {
			getNav: function(index){
				this.id = this.navList[index]['id'];
				this.getData()
			},
			getData(){
				var params = new URLSearchParams();
				params.append('type_id',this.id)
				params.append('page', this.page)
				axios.post(Http.SHAREINDEX,params).then( res => {
					var ret = res.data;
					this.contentList = ret['data'];
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.material{
		.banner{
			width: 100%;
			height: 4rem;
			img{
				width: 100%;
			}
			.swiper-container{
				height: 4rem;
			}
		}
		.nav{
			display: flex;
			algin-items: center;
			height: 0.88rem;
			line-height: 0.88rem;
			.nav-item{
				flex: 0 0 33.33%;
				&.active{
					color: rgb(255,101,68);
				}
			}
		}
		.content{
			padding: 0.3rem 0.24rem;
			.c-header{
				display: flex;
				margin-bottom: 0.2rem;
				img{
					margin-right: 0.2rem;
					width: 0.88rem;
					height: 0.88rem;
					border-radius: 0.88rem;
				}
				.c-header-right{
					text-align: left;
					font-size: 0.26rem;
					.name{
						margin-bottom: 0.1rem;
					}
					.time{
						color: #666;
					}
				}
			}
			.c-content{
				p{
					text-align: justify;
					font-size: 0.26rem;
				}
				.images{
					display: flex;
					flex-wrap: wrap;
					margin-top: 0.2rem;
					img{
						flex: 0 0 31%;
						margin-right: 3%;
						width: 31%;
						height: 2.1rem;
						margin-bottom: 0.2rem;
						border-radius: 0.06rem;
						&:nth-of-type(3n+3){
							margin-right: 0;
						}
					}
				}
			}
			.c-footer{
				margin-top: 0.6rem;
				position: relative;
				.c-footer-content{
					position: absolute;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;
					padding: 0 0.2rem;
					height: 0.6rem;
					line-height: 0.6rem;
					background: linear-gradient(to right,rgb(255,101,68), $color);
					border-radius: 0.6rem;
					color: #fff;
					vertical-align: middle;
					img{
						width: 0.34rem;
						height: 0.34rem;
						margin-right: 0.1rem;
					}
				}
			}
		}
	}
</style>